<template>
  <div class="container">
    <view class="status_box"> 订单状态：{{ status }} </view>
    <!-- 订单信息 -->
    <view class="content1" v-for="(item, i) in orderList" :key="i">
      <view class="title">
        <u-icon name="order" color="#2979ff" size="28"></u-icon>
        <text class="title-text">订单信息</text>
      </view>
      <view class="order-num"><span>订单号：</span> {{ item.num }}</view>
      <view class="leixing"><span>服务类型</span> ：安装 </view>
      <view class="product-address"><span>地址</span> ：{{ item.fadd }}</view>
      <view class="money"
        ><span>服务价格:</span> <text>￥{{ item.money }}</text></view
      >
      <!-- ---------------------- -->
      <u-icon name="account" color="#2979ff" size="28"></u-icon>
      <u-icon name="phone" color="#2979ff" size="28"></u-icon>
      <u-icon name="clock" color="#2979ff" size="28"></u-icon>
    </view>
    <!-- 客户信息 -->
  </div>
</template>

<script>
  import { getOrder } from '@/api/order.js'
  export default {
    data() {
      return {
        status: '待接单',
        query: {
          currentPage: 1,
          pageSize: 1,
          username: '1',
        },
        orderList: [],
      }
    },
    created() {
      // var username = window.localStorage.getItem('username')
      // this.query.username = username;
      this.query.username = 'admin'
      this.fetchData()
    },
    methods: {
      change(index) {
        this.current = index.index
        //如报错则用this.current = index代替上行
      },
      async fetchData() {
        const res = await getOrder(this.query)
        console.log(res)
        this.orderList = res.data.orders
      },
    },
  }
</script>

<style lang="scss">
  .container {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    background: rgb(232, 232, 232);
    .status_box {
      width: 350rpx;
      height: 80rpx;
      background-color: rgb(125, 125, 223);
      border-top-right-radius: 50rpx;
      border-bottom-right-radius: 50rpx;
      left: 0;
      margin-top: 20rpx;
      text-align: center;
      color: #fff;
      font-weight: bold;
      line-height: 80rpx;
      position: absolute;
    }
    .content1 {
      display: flex;
      flex-direction: column;
      width: 95%;
      height: 400rpx;
      background-color: #fff;
      border-radius: 20rpx;
      margin-top: 130rpx;
      padding: 20rpx 15rpx;
      .title {
        display: flex;
        align-items: center;
        margin-bottom: 10rpx;
      }
      .order-num {
        margin-bottom: 10rpx;
        span {
          color: gray;
        }
      }
      .leixing {
        margin-bottom: 10rpx;
        span {
          color: gray;
        }
      }
      .product-address {
        margin-bottom: 10rpx;
        span {
          color: gray;
        }
      }
      .money {
        margin-bottom: 10rpx;
        span {
          color: gray;
        }
      }
    }
    .content2 {
      display: flex;
      // align-items: center;
      flex-direction: column;
      // justify-content: center;
      margin-top: 10rpx;
      width: 95%;
      height: 200rpx;
      background: rgb(240, 233, 233);
      border-radius: 20rpx;
      .mes {
        font-weight: bold;
        margin: 10rpx 40rpx;
      }
      .cont2 {
        display: flex;
        flex-direction: row;
        margin-top: 20rpx;
        img {
          width: 60rpx;
          height: 60rpx;
          margin-left: 50rpx;
        }
        .cont2-text {
          margin-left: 70rpx;
          .name {
            font-size: 30rpx;
            span {
              font-size: 20rpx;
              color: rgb(144, 144, 144);
            }
          }
          .address {
            margin-top: 20rpx;
            font-size: 25rpx;
          }
        }
      }
    }
    .content3 {
      display: flex;
      // align-items: center;
      flex-direction: column;
      // justify-content: center;
      margin-top: 10rpx;
      width: 95%;
      height: 300rpx;
      background: rgb(240, 233, 233);
      border-radius: 20rpx;
    }
  }
</style>
